<template>
  <svg>
    <filter v-if="!!property.lightMode" :id="property.name+index+'filter'">
      <feDiffuseLighting in="SourceGraphic" result="light" :lighting-color="property.lightColor">
        <fePointLight :x="property.lightX" :y="property.lightY" :z="property.lightZ" />
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="2" k2="0" k3="0" k4="0"/>
    </filter>
    <defs v-if="property.fillMode!=='general'">
      <linearGradient v-if="property.fillMode==='linear'"
                      :id="`${property.name+index}gradient`"
                      x1="0%" y1="0%" :x2="property.direction==='horizontal'?'100%':'0%'" :y2="property.direction==='horizontal'?'0%':'100%'">
        <stop v-for="(stopItem,stopKey) in Object.keys(property.fillColor)" :key="`linear_stop_${stopKey}`" :offset="`${stopItem}%`" :style="{stopColor:property.fillColor[stopItem],stopOpacity:1}"/>
      </linearGradient>
      <radialGradient v-if="property.fillMode==='radial'"
                      :id="`${property.name+index}gradient`"
                      cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop v-for="(stopItem,stopKey) in Object.keys(property.fillColor)" :key="`linear_stop_${stopKey}`" :offset="`${stopItem}%`" :style="{stopColor:property.fillColor[stopItem],stopOpacity:1}"/>
      </radialGradient>
    </defs>
    <path :d="property.path" :filter="!!property.lightMode?`url(#${property.name+index}filter)`:''"
          :transform="transform"
          :style="property.fillMode!=='general'?{fill:`url(#${property.name+index}gradient)`}:{stoke:property.stoke,'stoke-width':property.border,fill:property.fill}"/>
  </svg>
</template>

<script>
export default {
  name: "semiCircleSvg",
  data(){
    return {
      defaultRefConfig:{
        x:0,
        y:0
      },
      defaultConfig:{
        "tag": "semiCircle",
        "offsetX": 0,
        "offsetY": 0,
        "width": 200,
        "height": 50,
        "stroke": "gray",
        "border": 1,
        "fill": {
          // "mode": "linear",
          // "direction": "horizontal",
          // "fillColor": {
          //   "0": "gray",
          //   "40": "white",
          //   "70": "gray",
          //   "90": "white",
          //   "100": "gray"
          // }
        },
        light:false,
        // "light": {
        //   "color": "white",
        //   "x": 100,
        //   "y": 0,
        //   "z": 20
        // }
      },
      property:{
        x:0,
        y:0,
        cx:0,
        cy:0,
        rx:50,
        ry:50,
        stoke:'gray',
        fill:'white',
        border:1,
        fillMode: "linear",
        direction:'horizontal',
        fillColor: {
          // "0": "gray",
          // "40": "white",
          // "70": "gray",
          // "90": "white",
          // "100": "gray"
        }
      }
    }
  },
  props:{
    index:{
      default:()=> {
        return ''
      }
    },
    motion:{
      default:()=> {
        return null
      }
    },
    config:{
      default:()=>{
        return {}
      }
    },
    refConfig:{
      default:()=>{
        return {}
      }
    },
    transform:{
      default:()=> {
        return 'scale(1,1)'
      }
    },
  },
  mounted() {
    this.initConfig();
  },
  watch:{
    config:function(){
      this.initConfig();
    },
    refConfig:function(){
      this.initConfig();
    }
  },
  methods:{
    initConfig(){
      this.ref=this.lodash.merge(this.defaultRefConfig,this.refConfig);
      this.cfg=this.lodash.merge(this.defaultConfig,this.config);
      this.property['name']=this.ref.name;
      this.property['x']=Number(this.ref.x)+Number(this.cfg.offsetX);
      this.property['y']=Number(this.ref.y)+Number(this.cfg.offsetY);
      this.property['cx']=Number(this.cfg.width)/2+this.property['x'];
      this.property['cy']=Number(this.cfg.height)+this.property['y'];
      this.property['rx']=Number(this.cfg.width)/2;
      this.property['ry']=Number(this.cfg.height);
      this.property['path']=`M ${this.property['x']} ${this.property['y']+this.property['ry']} A ${this.property['rx']} ${this.property['ry']} 0 0 1 ${this.property['x']+2*this.property['rx']} ${this.property['y']+this.property['ry']}`;
      this.property['stoke']=this.cfg['stoke'];
      this.property['border']=this.cfg['border'];
      this.property['direction']=this.cfg['direction'];
      if(this.tools.testType(this.cfg['fill'])==='string'){
        this.property['fillMode']='general';
      }else{
        this.property['fillMode']=this.cfg['fill'].mode;
        this.property['direction']=this.cfg['fill'].direction;
        this.property['fillColor']=this.cfg['fill'].fillColor;
      };
      if(!this.cfg['light']){
        this.property['lightMode']=false;
      }else{
        this.property['lightMode']=true;
        this.property['lightColor']=this.cfg['light'].color;
        this.property['lightX']=this.cfg['light'].x;
        this.property['lightY']=this.cfg['light'].y;
        this.property['lightZ']=this.cfg['light'].z;
      };
      this.property=this.lodash.cloneDeep(this.property)
    }
  }
}
</script>

<style scoped>

</style>